import React from "react"

import "@/components/common/BubbleChart/BubbleChart.component.styl"

class BubbleChart extends React.Component {
    constructor(props) {
        super(props);
    }

    initChart() {
        let {id, dataList} = this.props.bubbleData;
        let myChart = echarts.init(document.getElementById(`${id}-bubble-chart`));
        let data = _.map(dataList, item => {
            return {
                name: item.name,
                value: item.count,
                symbol: "rect",
                symbolSize: [100, 20],
                draggable: true,
                itemStyle: {
                    normal: {
                        color: "#093068",
                        shadowBlur: 0,
                        shadowColor: "#093068",
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                        borderColor: "#093068"
                    }
                },
                label: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontWeight: 800,
                        fontSize: 16
                    }
                }
            }
        });
        let option = {
            animationDuration: function (index) {
                return index * 100
            },
            tooltip: {
                position: function (point) {
                    return point
                },
                trigger: "item",
                backgroundColor: "#7285ff",
                textStyle: {
                    color: "#fff",
                    fontSize: 12
                },
                formatter: "{b}：{c}"
            },
            series: [
                {
                    type: "graph",
                    layout: "force",
                    force: {
                        repulsion: 200,
                        edgeLength: 5
                    },
                    data
                }
            ]
        };

        window.onresize = function () {
            myChart.resize();
        };
        myChart.setOption(option);
    }

    componentDidMount() {
        this.initChart();
    }

    render() {
        return (
            <div id={`${this.props.bubbleData.id}-bubble-chart`} className="bubble-chart">

            </div>
        )
    }
}

export default BubbleChart
